<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="telephone=no" name="format-detection">
    <title>黎世阁-账户信息</title>
    <link rel="stylesheet" href="../css/public.css"/>
    <link rel="stylesheet" href="../css/swiper.min.css"/>
    <link rel="stylesheet" href="../personal.css/collection.css"/>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/swiper.min.js"></script>
    <script type="text/javascript">
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;

                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
            recalc();
        })(document, window);

    </script>
</head>
<body>

<header>
    <i class="iconfont left_jt">&#xe65b;</i>
    <div class="title">关注</div>
    <span class="editor">编辑</span>
</header>
<nav>
<ul>
    <li class="nav_item border">
        商品 <span>6</span>
    </li>
    <li  class="nav_item">
        套装 <span>8</span>
    </li>
</ul>
</nav>
<div class="swiper-containerBox">
    <div class="swiper-wrapper">
        <div class="swiper-slide stop-swiping">

            <section>
                <ul>
                    <li>
                        <div class="label-box ">
                            <input type="checkbox" id="duoxuan3" class="danpin">
                            <label for="duoxuan3"></label>
                        </div>
                        <div class="box">
                            <div class="coll_img fl">
                                <img src="../personal_img/coll_img.png" alt="">
                            </div>
                            <div class="coll_inn fl">
                                <p class="coll_name">黎氏阁现代创意书柜现代简约创意
                                    书柜</p>
                                <p class="coll_price" ><span >￥</span> <span>16800</span></p>
                            </div>
                        </div>

                    </li>
                    <li>
                        <div class="label-box ">
                            <input type="checkbox" id="duoxuan4" class="danpin">
                            <label for="duoxuan4"></label>
                        </div>
                        <div class="box">
                            <div class="coll_img fl">
                                <img src="../personal_img/coll_img.png" alt="">
                            </div>
                            <div class="coll_inn fl">
                                <p class="coll_name">黎氏阁现代创意书柜现代简约创意
                                    书柜</p>
                                <p class="coll_price" ><span >￥</span> <span>16800</span></p>
                            </div>
                        </div>

                    </li>
                    <li>
                        <div class="label-box ">
                            <input type="checkbox" id="duoxuan2" class="danpin">
                            <label for="duoxuan2"></label>
                        </div>
                        <div class="box">
                            <div class="coll_img fl">
                                <img src="../personal_img/coll_img.png" alt="">
                            </div>
                            <div class="coll_inn fl">
                                <p class="coll_name">黎氏阁现代创意书柜现代简约创意
                                    书柜</p>
                                <p class="coll_price" ><span >￥</span> <span>16800</span></p>
                            </div>
                        </div>

                    </li>
                    <li>
                        <div class="label-box ">
                            <input type="checkbox" id="duoxu" class="danpin">
                            <label for="duoxu"></label>
                        </div>
                        <div class="box">
                            <div class="coll_img fl">
                                <img src="../personal_img/coll_img.png" alt="">
                            </div>
                            <div class="coll_inn fl">
                                <p class="coll_name">黎氏阁现代创意书柜现代简约创意
                                    书柜</p>
                                <p class="coll_price" ><span >￥</span> <span>16800</span></p>
                            </div>
                        </div>

                    </li>

                </ul>
            </section>
        </div>
        <div class="swiper-slide stop-swiping">

            <section>
                <ul>
                    <li>
                        <div class="label-box ">
                            <input type="checkbox" id="duoxuan7" class="danpin">
                            <label for="duoxuan7"></label>
                        </div>
                        <div class="box">
                            <div class="coll_img fl">
                                <img src="../personal_img/coll_img.png" alt="">
                            </div>
                            <div class="coll_inn fl">
                                <p class="coll_name">黎氏阁现代创意书柜现代简约创意
                                    书柜</p>
                                <p class="coll_price" ><span >￥</span> <span>16800</span></p>
                            </div>
                        </div>

                    </li>
                    <li>
                        <div class="label-box ">
                            <input type="checkbox" id="duoxuan8" class="danpin">
                            <label for="duoxuan8"></label>
                        </div>
                        <div class="box">
                            <div class="coll_img fl">
                                <img src="../personal_img/coll_img.png" alt="">
                            </div>
                            <div class="coll_inn fl">
                                <p class="coll_name">黎氏阁现代创意书柜现代简约创意
                                    书柜</p>
                                <p class="coll_price" ><span >￥</span> <span>16800</span></p>
                            </div>
                        </div>

                    </li>
                    <li>
                        <div class="label-box ">
                            <input type="checkbox" id="duoxuan9" class="danpin">
                            <label for="duoxuan9"></label>
                        </div>
                        <div class="box">
                            <div class="coll_img fl">
                                <img src="../personal_img/coll_img.png" alt="">
                            </div>
                            <div class="coll_inn fl">
                                <p class="coll_name">黎氏阁现代创意书柜现代简约创意
                                    书柜</p>
                                <p class="coll_price" ><span >￥</span> <span>16800</span></p>
                            </div>
                        </div>

                    </li>
                    <li>
                        <div class="label-box ">
                            <input type="checkbox" id="duox" class="danpin">
                            <label for="duox"></label>
                        </div>
                        <div class="box">
                            <div class="coll_img fl">
                                <img src="../personal_img/coll_img.png" alt="">
                            </div>
                            <div class="coll_inn fl">
                                <p class="coll_name">黎氏阁现代创意书柜现代简约创意
                                    书柜</p>
                                <p class="coll_price" ><span >￥</span> <span>16800</span></p>
                            </div>
                        </div>

                    </li>

                </ul>
            </section>
        </div>


    </div>
</div>
<footer class="clearfix">
    <div class="all-box fl  clearfix">
        <input type="checkbox" id="all" class="danpin">
        <label for="all" class="fl"></label>
        <span class="fl">全选</span>
    </div>
    <div class="delete fr">
        删除
    </div>
</footer>
<script>
    var mySwiper = new Swiper('.swiper-containerBox', {

        noSwiping : true,
        noSwipingClass : 'stop-swiping',
        speed:200,
        pagination: '.swiper-pagination2',
        paginationClickable: true,
        onSlideChangeEnd: function (swiper) {
            var j=mySwiper.activeIndex;
            $('.nav_item').removeClass('border').eq(j).addClass('border');
        }
    });

    $('.editor').click(function (e) {
        if(!($(this).hasClass("active"))){
            $(this).addClass("active");
            $('.box').css("transform","translateX(0.5rem)");
            $('footer').css("transform","translateY(-0.98rem)");
            $(".title").html("编辑");
            $(".editor").html("完成");
            $('.nav_item').off("click");
        }
        else {
            $(this).removeClass("active");
            $('.box').css("transform","translateX(0)");
            $('footer').css("transform","translateY(0)");
            $(".title").html("关注");
            $(".editor").html("编辑");
            $('.nav_item').on("click",navSwitch);
        }

    });
 $('.nav_item').on('click', navSwitch );
  function navSwitch(e) {


      e.preventDefault();
      //得到当前索引

      var i = $(this).index();

      $('.nav_item').removeClass('border').eq(i).addClass('border');
      mySwiper.slideTo(i, 500, false);

  }
    function stopBubble(e)
    {
        if (e && e.stopPropagation)
            e.stopPropagation();
        else
            window.event.cancelBubble=true
    }
    $('#all').click(function(){


        if($("#all").prop("checked")){
            $('.label-box input').prop('checked',true)
            $('.label-box input').parent().parent().addClass('xuanzhong');        }
        else{
            $('.label-box input').prop("checked",false)
            $('.label-box input').parent().parent().removeClass('xuanzhong');
        }
    });
    $('.label-box input').click(function() {
        if($(this).prop("checked")){
            $(this).prop('checked',true);
            $(this).parent().parent().addClass('xuanzhong');        }
        else{
            $('#all').prop("checked",false)
            $(this).prop("checked",false);
            $(this).parent().parent().removeClass('xuanzhong');
        }
    })

    $('.delete').click(function(){
        if(confirm("确定要进行此操作吗？"))
        {
            $(".label-box input").each(function(){
                $(".xuanzhong").remove();
                $('#all').prop("checked",false)
            });
        }
        else
        {
           return;
        }

    })

</script>
</body>
</html>